<template>
  <div id="movie">
      <nav class="toptitle">
          <div class="titleBtn" @click="changeCity">
            <span class="titleName">{{cityName}}</span>
            <van-icon name="arrow-down" />
          </div>
          <div class="cinematitle">影院</div>
      </nav>
      <main >
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
              <van-cell  v-for="item in cinemaList" :key="item.cinemaId" class="FlexBox" @click="btnCinemaDetail(item.cinemaId)">
                <div class="cinemaBox">
                    <div class="cinema-left">
                        <div class="cinema-title Fontsize">{{item.name}}</div>
                        <div class="cinema-address line-ellipsis marginTop">{{item.address}}</div>
                    </div>
                    <div class="cinema-right">
                      <div style="color:#ff5f16">
                        <i>￥</i>
                        <span class="mgn Fontsize">{{item.lowPrice | price}}</span>
                        <i>起</i>
                      </div>
                      <div class="distance marginTop">
                       {{item.Distance | distance }}
                      </div>
                    </div>
                </div>
              </van-cell>
        </van-list>
      </main>
      <footer>
        <bottom></bottom>
      </footer>
  </div>
</template>

<script>

import bottom from "@/components/footer";
import {mapActions,mapState} from 'vuex'
export default {
  data(){
    return{
      cinemaList:[],
      loading: false,
      finished: false,
      cityName:'广州',
      
    }
  },

  //组件
  components:{
    bottom
  },

   //过滤器
  filters:{
    price(value){
      return parseFloat(value / 100)
    },
    distance(value){
      return value.toFixed(2) + 'km'
    }
  },

  //计算属性
  computed:{
    ...mapState('cinema',['cinemas']),
    ...mapState('data',['id','ct'])
  },
  
  //页面创建
   created(){
     this.setCinema()
     this.cityName = this.ct
  },
  
  methods:{

   ...mapActions('cinema',['getCinema']),

    async setCinema(){

      await this.getCinema(this.id),
      this.cinemaList = this.cinemas
    },
  //拉下加载
   onLoad(){
      this.setCinema()
      this.loading = false
      if(this.cinemaList > 10){
        this.finished = true
      }
   },

    // 进入详情页按钮
    btnCinemaDetail(itmcinId){
        this.$router.push('/cinemadetails')
        this.$store.state.cinema.cinemaId = itmcinId
       
    },
    //选择城市
    changeCity(){
      this.$router.push('/city')
    },
  },
};
</script>

<style scoped>
#movie {
  height: 100%;
  display: flex;
  flex-direction: column;
}

nav {
  width: 100%;
  height: 0.6rem;
  border-bottom: 1px solid #ccc;
  font-size: .16rem;
  display: flex;
  
  
}

main {
  flex: 1;
  overflow: scroll;
  
}
.van-list{
  background: rgb(240, 239, 239);
}
.van-cell{
  height:1rem ;
  background-color: #fff;
  border-bottom: .013333rem solid #999;
  margin-top: .066667rem ;
  border-radius: .04rem;
 
}

.cinemaBox{
   display: flex;
   justify-content: space-between;
}
.cinema-left{
  width: 80%;
 
}
.cinema-rigth{
  width:15% ;
  
}
.Fontsize{
  font-size: .16rem;
}
.mgn{
  margin: 0 .04rem;
}
.distance{
  margin-top:.04rem ;
  font-size: .12rem;
}
.cinema-right i {
  font-size: .133333rem;
  font-style: normal;
  
}
footer {
  width: 100%;
  height: 0.5rem;
  border-top: 1px solid #ccc;
  
}
.cinema-address{
  font-size: .12rem;
}

.line-ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
} 
.marginTop{
  margin-top: .066667rem;
}


.cinematitle{
  width: 1.6rem;
  height: .4rem;
  line-height: 0.4rem;
  text-align: center;
  font-size: .186667rem;
  align-items: center;
  margin-top: .106667rem;
}


.titleBtn{
  display: flex;
  width: 1.1rem;
  height: 100%;
  align-items: center;
}
.titleName{
  max-width: 0.6rem;
  font-size: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}
van-icon{
  align-items: center;
}


</style>